<template>
  <div id="talentCollect">
    <div v-if="count != 0 && !loading">
      <dl v-if="industryDataName.length != 0">
        <dt>达人行业</dt>
        <dd
          ref="ovBox"
          :class="[{ overstep: isOverstep }, { is_unfold: isUnfold }]"
        >
          <div class="cg_items" ref="ovChild">
            <span
              v-for="(item, idx) in industryDataName"
              :key="idx + 'cdi'"
              :class="{ active: item == isActive }"
              @click="getCondition(item)"
              >{{ item }}</span
            >
            <i @click="unfoldFn">{{ isUnfold ? "收起" : "展开" }}</i>
          </div>
        </dd>
      </dl>
      <div class="num">
        共 <span style="color:#fd7f2c;">{{ count }}</span> 个收藏
      </div>
    </div>
    <ul
      class="fixedThead"
      ref="fixedThead"
      :class="{ isShow: isFixed }"
      :style="showLeft == true ? 'left:222px' : 'left:98px'"
      v-if="count != 0 && !loading"
    >
      <li>达人</li>
      <li tc>达人行业</li>
      <li tc @click="sort_fun(false, 1)" v-if="orderBy == 1 && sortValue == 1">
        粉丝总数
        <img
          src="@/assets/meng/down_up.png"
          v-if="orderBy == 1 && sortValue == 1"
          class="sort"
        />
      </li>
      <li tc v-else @click="sort_fun(true, 1)">
        粉丝总数
        <img
          src="@/assets/meng/up_down.png"
          v-if="orderBy == 0 && sortValue == 1"
        /><img src="@/assets/meng/no_down_up.png" v-else />
      </li>

      <li
        tc
        @click="sort_fun(false, 2)"
        v-if="orderBy == 1 && sortValue == 2"
        class="cursor"
      >
        点赞总数
        <img
          src="@/assets/meng/down_up.png"
          v-if="orderBy == 1 && sortValue == 2"
          class="sort"
        />
      </li>
      <li tc v-else @click="sort_fun(true, 2)">
        点赞总数
        <img
          src="@/assets/meng/up_down.png"
          v-if="orderBy == 0 && sortValue == 2"
        /><img src="@/assets/meng/no_down_up.png" v-else />
      </li>

      <li
        tc
        @click="sort_fun(false, 4)"
        v-if="orderBy == 1 && sortValue == 4"
        class="cursor"
      >
        评论总数
        <img
          src="@/assets/meng/down_up.png"
          v-if="orderBy == 1 && sortValue == 4"
          class="sort"
        />
      </li>
      <li tc v-else @click="sort_fun(true, 4)">
        评论总数
        <img
          src="@/assets/meng/up_down.png"
          v-if="orderBy == 0 && sortValue == 4"
        /><img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <li
        tc
        @click="sort_fun(false, 5)"
        v-if="orderBy == 1 && sortValue == 5"
        class="cursor"
      >
        转发总数
        <img
          src="@/assets/meng/down_up.png"
          v-if="orderBy == 1 && sortValue == 5"
          class="sort"
        />
      </li>
      <li tc v-else @click="sort_fun(true, 5)">
        转发总数
        <img
          src="@/assets/meng/up_down.png"
          v-if="orderBy == 0 && sortValue == 5"
        /><img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <li
        tc
        @click="sort_fun(false, 3)"
        v-if="orderBy == 1 && sortValue == 3"
        class="cursor"
      >
        作品数
        <img
          src="@/assets/meng/down_up.png"
          v-if="orderBy == 1 && sortValue == 3"
          class="sort"
        />
      </li>
      <li tc v-else @click="sort_fun(true, 3)">
        作品数

        <img
          src="@/assets/meng/up_down.png"
          v-if="orderBy == 0 && sortValue == 3"
        /><img src="@/assets/meng/no_down_up.png" v-else />
      </li>
      <li tc>操作</li>
    </ul>
    <table class="table" ref="tableEl">
      <thead>
        <tr :class="{ is_fixed: isFixed }" ref="th_tr_El">
          <th>达人</th>
          <th>达人行业</th>
          <th @click="sort_fun(false, 1)" v-if="orderBy == 1 && sortValue == 1">
            粉丝总数
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderBy == 1 && sortValue == 1"
              class="sort"
            />
          </th>
          <th v-else @click="sort_fun(true, 1)">
            粉丝总数
            <img
              src="@/assets/meng/up_down.png"
              v-if="orderBy == 0 && sortValue == 1"
            /><img src="@/assets/meng/no_down_up.png" v-else />
          </th>

          <th
            @click="sort_fun(false, 2)"
            v-if="orderBy == 1 && sortValue == 2"
            class="cursor"
          >
            点赞总数
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderBy == 1 && sortValue == 2"
              class="sort"
            />
          </th>
          <th v-else @click="sort_fun(true, 2)">
            点赞总数
            <img
              src="@/assets/meng/up_down.png"
              v-if="orderBy == 0 && sortValue == 2"
            /><img src="@/assets/meng/no_down_up.png" v-else />
          </th>

          <th
            @click="sort_fun(false, 4)"
            v-if="orderBy == 1 && sortValue == 4"
            class="cursor"
          >
            评论总数
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderBy == 1 && sortValue == 4"
              class="sort"
            />
          </th>
          <th v-else @click="sort_fun(true, 4)">
            评论总数
            <img
              src="@/assets/meng/up_down.png"
              v-if="orderBy == 0 && sortValue == 4"
            /><img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <th
            @click="sort_fun(false, 5)"
            v-if="orderBy == 1 && sortValue == 5"
            class="cursor"
          >
            转发总数
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderBy == 1 && sortValue == 5"
              class="sort"
            />
          </th>
          <th v-else @click="sort_fun(true, 5)">
            转发总数
            <img
              src="@/assets/meng/up_down.png"
              v-if="orderBy == 0 && sortValue == 5"
            /><img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <th
            @click="sort_fun(false, 3)"
            v-if="orderBy == 1 && sortValue == 3"
            class="cursor"
          >
            作品数
            <img
              src="@/assets/meng/down_up.png"
              v-if="orderBy == 1 && sortValue == 3"
              class="sort"
            />
          </th>
          <th v-else @click="sort_fun(true, 3)">
            作品数

            <img
              src="@/assets/meng/up_down.png"
              v-if="orderBy == 0 && sortValue == 3"
            /><img src="@/assets/meng/no_down_up.png" v-else />
          </th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody v-if="talentData.length != 0 && !loading">
        <tr
          v-for="(item, index) in talentData"
          :key="index"
          :id="!index ? 'tr1' : ''"
        >
          <td>
            <div class="live_box">
              <div class="boxzhibo">
                <img
                  :src="item.logo"
                  alt=""
                  @click="
                    go_to_page01(item.liveStatus, item.authorId, item.roomId)
                  "
                />
                <div class="zhibo" v-if="item.liveStatus == 1">
                  <p class="livingGif">
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                  </p>
                </div>
              </div>

              <div class="live_box_right">
                <div
                  class="title"
                  @click="
                    go_to_page01(item.liveStatus, item.authorId, item.roomId)
                  "
                >
                  {{ item.nickName }}
                </div>
                <div class="time">抖音号：{{ item.uniqueId }}</div>
              </div>
            </div>
          </td>
          <td>{{ item.category }}</td>
          <td>{{ format_num(item.totalFans) }}</td>
          <td>{{ format_num(item.totalFavorite) }}</td>
          <td>{{ format_num(item.totalComment) }}</td>
          <td>{{ format_num(item.totalShare) }}</td>
          <td>{{ format_num(item.totalVideo) }}</td>
          <td>
            <button
              class="no_collect"
              @click="no_collect(item.authorId, index)"
            >
              取消收藏
            </button>
          </td>
        </tr>
      </tbody>
      <div v-if="!loading && talentData.length == 0">
        <div class="zw">
          <img src="@/assets/liu/zw.png" />
          <p>您还未收藏任何内容哦~</p>
        </div>
      </div>
    </table>
    <p
      class="nothing"
      v-if="
        (talentData.length < 30 && !loading && talentData.length != 0) ||
          page * 30 == count
      "
    >
      我是有底线的～
    </p>
    <div class="pageBox" v-if="talentData.length != 0 && !loading">
      <el-pagination
        background
        layout="prev, pager, next, jumper"
        :total="count"
        :page-size="30"
        :current-page="page"
        @current-change="talentList"
        :hide-on-single-page="true"
      ></el-pagination>
    </div>
    <div
      v-loading="loading"
      v-if="loading"
      class="loading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
    ></div>
    <div class="dialog_box">
      <el-dialog :visible.sync="dialogVisible1" :show-close="false">
        <p class="p1">
          确认取消收藏
        </p>
        <span class="isTips"> 是否取消收藏</span>
        <span slot="footer" class="dialog-footer">
          <el-button class="color" @click="dialogVisible1 = false"
            >取 消</el-button
          >
          <el-button class="butTips" type="primary" @click="dialog"
            >确 定</el-button
          > 
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {
      my_radio02: "全部",
      dialogVisible1: false, //删除提示弹窗
      orderBy: 1, //1降序 0升序
      sortValue: 0,
      count: " - ",
      page: 1,
      industryDataName: [],
      industryDataValue: [],
      talentData: [],
      talentId: "",
      talentIdNum: "",
      loading: true,
      isFixed: false,
      showLeft: true,
      isOverstep: false, //是否超出（初始化）
      isUnfold: false, //是否展示
      category: "0",
      isActive: "全部",
      showIs: false
    };
  },
  computed: {
    listen_change() {
      const { my_radio02 } = this;
      return {
        my_radio02
      };
    }
  },
  created() {
    this.$watch(
      "listen_change",
      this.debounce((newValue, oldValue) => {
        this.page = 1;
        this.talentData = [];
        this.talentList();
      }, 0)
    );

    this.industry();
    this.talentList();
  },
  mounted() {
    window.addEventListener("scroll", this.initHeight);
    window.addEventListener("resize", () => {
      //给浏览器窗口绑定变化大小事件
      this.setTBBar();
      this.setCondition();
    });
    this.setCondition();
  },
  watch: {
    "$store.state.left_nav_flag"(old, newOld) {
      this.showLeft = newOld;
      if ((newOld = false)) {
        this.setTBBar();
      } else {
        this.setTBBar();
      }
    }
  },

  methods: {
    // 获取子节点函数（后期可集成到一个库里）
    getChilds(pNode) {
      if (!pNode) return false;
      let nodes = pNode.childNodes;
      let newList = [];
      for (let i = 0; i < nodes.length; i++) {
        let node = nodes[i];
        if (node.nodeType === 1) {
          //判断类型
          newList.push(node);
        }
      }
      return newList;
    },
    // 设置表格表头滑动置顶
    setTBBar() {
      this.$nextTick(() => {
        let tableEl = this.$refs.tableEl;
        let ulEl = this.$refs.fixedThead;
        let tr1 = document.querySelector("#tr1");
        // thTrEl.style.width = tableEl.offsetWidth+'px';
        if (tr1) {
          let tds = this.getChilds(tr1);
          let liEls = this.getChilds(ulEl);
          for (let i = 0; i < liEls.length; i++) {
            liEls[i].style.width = tds[i].offsetWidth + "px";
          }
        }
      });
    },
    //取消
    dialog() {
      if (this.talentData.length == 1) {
        this.isActive = "全部";
        this.category = "0";
        this.talentList();
      }
      let that = this;
      that.$axios
        .post(
          "/api/collection/CancelCollection",
          {
            CollectId: this.talentId,
            Module: 1 //模块 1达人 2视频 3音乐 4话题 5商品
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel01 != null) {
                that.cancel01();
              }
              that.cancel01 = c;
            })
          }
        )
        .then(res => {
          if (res.data.code == 0) {
            that.talentData.splice(this.talentIdNum, 1);
            that.count--;
            this.dialogVisible1 = false;
            this.page = 1;
            this.talentData = [];

            this.industry();
            this.talentList();
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    // 取消收藏
    no_collect(id, index) {
      this.dialogVisible1 = true;
      this.talentId = id;
      this.talentIdNum = index;
    },
    // 排序
    sort_fun(parm01, parm02) {
      if (parm01) {
        this.orderBy = 1;
      } else {
        this.orderBy = 0;
      }
      this.sortValue = parm02;
      this.talentList();
    },
    industry() {
      this.$axios({
        method: "get",
        url: "/api/collection/GetAuthorsCollectionCategory"
      })
        .then(response => {
          if (response.data.code == 0) {
            this.industryDataName = response.data.data.name;
            this.industryDataValue = response.data.data.value;
          }
          this.setCondition();
        })
        .catch(error => {
          console.log(error);
        });
    },
    talentList(cpage) {
      this.loading = true;
      if (cpage) {
        this.page = cpage;
        this.backTop();
      }

      this.$axios({
        method: "get",
        url: "/api/collection/GetAuthorsCollection",
        params: {
          pageIndex: this.page,
          pageSize: 30,
          categoryId: this.category,
          order: this.orderBy,
          sort: this.sortValue
        }
      })
        .then(res => {
          if (res.data.code == 0) {
            this.loading = false;
            this.talentData = res.data.data;
            this.count = res.data.count;
            this.setCondition();
          }
          if (res.data.code == 1002) {
            this.talentData = [];
            this.loading = false;
            this.count = res.data.count;
            this.isActive = "全部";
          }
          this.setTBBar();
        })
        .catch(error => {
          this.loading = false;
          console.log(error);
        });
    },
    backTop() {
      document.body.scrollTop = document.documentElement.scrollTop = 0;
    },
    go_to_page01(id, authorId, roomId) {
      if (id == 1) {
        let router = this.$router.resolve({
          path: `/live/${roomId}`
        });
        window.open(router.href, "_blank");
      } else {
        let router = this.$router.resolve({
          path: `/talent_main/tdetails/${authorId}/${0}`
        });
        window.open(router.href, "_blank");
      }
    },
    initHeight() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      this.isFixed = scrollTop > 100;
      0 ? true : false;
    },
    unfoldFn() {
      this.isUnfold = !this.isUnfold;
      console.log(this.isUnfold + "@@");
    },
    setCondition() {
      this.$nextTick(() => {
        let box = this.$refs.ovBox;
        if (!box) return;
        let childBox = this.$refs.ovChild;
        let boxHeight = box.offsetHeight;
        let childBoxHeight = childBox.offsetHeight;
        if (boxHeight < childBoxHeight) {
          this.isOverstep = true;
        }
      });
    },
    getCondition(itemObj) {
      //点击达人行业选项
      this.isActive = itemObj;
      this.industryDataName.map((item, index) => {
        if (item == itemObj) {
          this.category = this.industryDataValue[index];
        }
      });
      this.page = 1;
      this.talentData = [];
      this.talentList();
    }
  },
  components: {},
  destroyed() {
    window.removeEventListener("scroll", this.initHeight);
  }
};
</script>

<style scoped lang="less">
#talentCollect {
  padding: 20px 20px 0 20px;
  min-height: 100vh;
  padding-bottom: 1px;
  .num {
    font-size: 14px;
    font-weight: normal;
    font-stretch: normal;
    letter-spacing: 0px;
    color: #888888;
    text-align: left;
  }
  .table {
    width: 100%;
    margin-top: 14px;
    box-sizing: border-box;
    position: relative;
    thead {
      img {
        width: 5px;
        height: 10px;
        vertical-align: 0;
      }
      tr {
        width: 100%;
        height: 48px;
        background-color: #f5f9ff;
        border-radius: 4px;
        font-size: 14px;
        font-weight: 400;
        font-stretch: normal;
        letter-spacing: 0;
        color: #555;
        th:nth-child(1) {
          min-width: 18%;
          text-align: left;
          padding-left: 39px;
        }
        th:nth-child(2),
        th:nth-child(3),
        th:nth-child(4),
        th:nth-child(5),
        th:nth-child(6),
        th:nth-child(7),
        th:nth-child(8) {
          width: 10.8%;
          cursor: pointer;
        }
      }
    }
    tbody {
      tr {
        height: 78px;
        .live_box {
          padding-left: 28px;
          display: flex;
          // overflow: hidden;
          // text-overflow: ellipsis;
          .boxzhibo {
            position: relative;
            .zhibo {
              width: 18px;
              height: 18px;
              background: linear-gradient(90deg, #ff295d 1%, #fa4fa2 100%);
              background-repeat: no-repeat;
              background-size: 100% 100%;
              border-radius: 4px;
              position: absolute;
              top: 34px;
              left: 32px;
              z-index: 2;
              display: flex;
              justify-content: center;
              align-items: center;

              .playingText {
                font-size: 12px;
                color: #ffffff;
                // padding-left: 5px;
              }
            }
          }
          img {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 1px solid #e5e5e5;
            margin-right: 10px;
            cursor: pointer;
          }
          .live_box_right {
            display: flex;
            flex-direction: column;
            justify-content: center;
          }
          .title {
            font-size: 14px;
            font-weight: 600;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #222222;
            white-space: nowrap;
            cursor: pointer;
            // width: 244px;

            // overflow: hidden;
            // text-overflow: ellipsis;
          }
          .title:hover {
            color: #ff924b;
          }
          .time {
            font-size: 13px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #888888;
            text-align: left;
            margin-top: 6px;
            white-space: nowrap;
          }
        }
        td:nth-child(2) {
          font-size: 15px;
          text-align: center;
        }
        td:nth-child(3),
        td:nth-child(4),
        td:nth-child(5),
        td:nth-child(6),
        td:nth-child(7) {
          font-family: DINAlternate-Bold;
          font-size: 15px;
          text-align: center;
        }
      }
      tr:hover {
        .no_collect {
          background: #fffaf7;
        }
      }
    }
    td:nth-child(8) {
      text-align: center;
      .no_collect {
        width: 88px;
        height: 32px;
        border-radius: 4px;
        border: solid 1px #fd7f2c;
        font-size: 14px;
        letter-spacing: 0px;
        color: #fd7f2c;
      }
      .no_collect:hover {
        color: #ff924b;
        border: solid 1px #ff924b;
      }
    }
  }
  .zw {
    position: absolute;
    top: 288px;
  }
}
.fixedThead {
  display: none;
  position: fixed;
  top: 60px;
  left: 200px;

  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  color: #555;
  background-color: #f5f9ff;
  height: 48px;
  line-height: 48px;
  overflow: hidden;
  z-index: 99;
  font-size: 0;

  li {
    box-sizing: border-box;
    display: inline-block;
    font-size: 14px;
  }

  li:nth-child(3),
  li:nth-child(4),
  li:nth-child(5),
  li:nth-child(6),
  li:nth-child(7) {
    cursor: pointer;
  }
  li:nth-child(1) {
    padding-left: 39px;
  }
  &.isShow {
    display: block;
  }
  img {
    width: 5px;
    height: 10px;
    vertical-align: 0px;
  }
}
[tc] {
  text-align: center;
}
[tl] {
  text-align: left;
}
[tr] {
  text-align: right;
}
dl {
  display: flex;
  font-size: 14px;
  margin-bottom: 6px;
  &:last-child {
    margin-bottom: 0;
  }
  dt {
    padding-top: 6px;
    width: 78px;
    flex-shrink: 0;
    color: #888;
  }
  dd {
    position: relative;
    color: #555;
    height: 32px;
    overflow: hidden;
    .cg_items {
      display: inline-block;
      font-size: 0;
      span {
        display: inline-block;
        height: 32px;
        padding: 0 16px;
        // margin-bottom: 5px;
        line-height: 32px;
        font-size: 14px;
        cursor: pointer;
        vertical-align: middle;
        &.active {
          color: #fd7f2c;
          background-color: #fff1e8;
          border-radius: 4px;
        }
      }
      span:hover {
        color: #ff924b;
      }
      i {
        position: absolute;
        display: none;
        right: 0;
        top: 6px;
        font-size: 14px;
        font-style: normal;
        color: #ff924b;
        cursor: pointer;
      }
    }
    &.overstep {
      padding-right: 22px;
      .cg_items {
        i {
          display: inline-block;
          vertical-align: middle;
        }
      }
    }
    &.is_unfold {
      padding-right: 0;
      height: inherit;
      .cg_items {
        i {
          position: inherit;
        }
      }
    }
  }
}
</style>
